<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-12-02 16:11:39
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2025-01-06 16:57:47
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\home\components\Pending.vue
 * @Description: 待办事项
-->
<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import { skipType } from "@/utils/achievementSkipType"
import { projectNatureList, achvTypeList, projectStatusList } from '@/utils/typeList'

const props = defineProps<{
  item: any
}>()

const userStore = useUserStore()
const router = useRouter()

function toView(){
  // 项目详情页
  if(props.item.projectName)
    return router.push(`/project/mine/edit?projectNature=${props.item.projectNature}&projectId=${props.item.id}&projectName=${props.item.projectName}&mode=view`)
  // 项目列表页
  if(props.item.projectNature){
    const status = ref([2,5,7,13,24,25]) // 纵向、校级项目
    if(props.item.projectNature === 2) { // 校级项目列表
      return router.push(`/project/school/schoolManage?projectNature=${props.item.projectNature}&projectType=${props.item.projectType}&status=${JSON.stringify(status.value)}`)
    }
    if(props.item.projectNature === 3) { // 横向项目
      status.value = [16,19,10,24,25]
    }
    // 横向、纵向项目列表
    return router.push(`/project/portrait/portraitManage?projectNature=${props.item.projectNature}&projectType=${props.item.projectType}&status=${JSON.stringify(status.value)}`)
  }
  // 成果列表页
  if(achvTypeList[props.item.achvType]){
    if(userStore.currentIdentityCode === 'FACULTY_ADMIN'){
      router.push(`/achievementReward/college/college-${skipType(props.item.achvType)}?status=1`)
    } else{
      router.push(`/achievementReward/office/office-${skipType(props.item.achvType)}?status=2`)
    }
  }

}
</script>

<template>
  <div class="item" @click="toView">
    <div class="item-name">
      <div>
        <i class="iconfont icon-daibantubiao icon-tip text-[12px]" />
        <el-tooltip :content="props.item.projectName || achvTypeList[props.item.achvType] || props.item.projectTypeName">
          <span class="name">{{props.item.projectName || achvTypeList[props.item.achvType] || (props.item.projectNature === 3 ? '横向项目' : props.item.projectTypeName)}}</span>
        </el-tooltip>
      </div>
      <span v-if="userStore.currentIdentityCode === 'NORMAL'" class="status">{{projectStatusList[props.item.projectStatus]}}</span>
      <span v-if="props.item.statisticsYearName" class="text-[#4E5969]">{{ props.item.statisticsYearName }} 年度</span>
    </div>
    <div v-if="props.item.upcomingType === 1" class="item-lebe project-labe">
      <span>项目编号：{{ props.item.projectCode }}</span>
      <span>项目性质：{{projectNatureList[props.item.projectNature]}}</span>
      <span>项目分类：{{props.item.projectTypeName}}</span>
    </div>
    <div v-if="userStore.currentIdentityCode !== 'NORMAL'" class="item-lebe">
      <div>待提交：<span class="count-color">{{ props.item.submitCount }}</span></div>
      <div>{{achvTypeList[props.item.achvType] ? '已登记：' : '已申报：'}}<span class="count-color">{{props.item.declareCount}}</span></div>
      <div>待审核：<span class="count-color-red">{{props.item.approveCount}}</span></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item{
  @apply: bg-[#F6FAFF] p-[12px] mt-[4px] mb-[12px] border border-color-[#BEDAFF] rounded-[8px] cursor-pointer;
  &:hover{
    @apply: bg-[#E8F3FF];
  }
  .icon-tip{
    @apply: text-white bg-[#FFAC54] px-[4px] h-[20px] leading-[20px] rounded-[6px];
  }
  .status{
    @apply: text-[#FF7D00];
  }
  .item-lebe{
    @apply: flex items-center text-[#86909C] text-[14px] ml-[32px] mb-[8px];
    &:last-child{
      @apply: mb-0;
    }
    div{
      @apply: inline-block w-[100px] mr-[24px];
      &:last-child{
        @apply: flex-1 truncate;
      }
      .count-color{
        @apply: text-[#57A9FB] font-700;
      }
      .count-color-red{
        @apply: text-[#F53F3F] font-700;
      }
    }
  }
  .project-labe{
    span{
      @apply: mr-[40px];
    }
  }
}
.item-name{
  @apply: flex justify-between items-center w-full mb-[2px] leading-[24px];
  &>div{
    @apply: flex items-center mr-[20px];
    max-width: calc(100% - 130px);
  }
  .name{
    @apply: inline-block flex-1 text-[#1D2129] text-[15px] font-700 ml-[12px] truncate;
  }
}
</style>